<template>
    <div class="cartArea">
        <h3>购物车</h3>
        <!-- cart -->
        <div class="productArea" >
            <div class="everyCart clearFix" v-for="(item,index) in cart" :key="index">
                <div class="checkBox">
                    <input type="checkbox" :checked="item.checked" @click="changCheck($event,index)"/>
                </div>
                <div class="productPic">
                    <img :src="item.goods_small_logo" alt="">
                </div>
                <div class="productName">
                    <p class="nameText">{{item.goods_name}}</p>
                    <p class="priceText">￥ {{item.goods_price}}</p>
                    <p class="numCompute">
                        <button class="dec" @click="computeNum($event,index)" data-comType='-1'>-</button>
                        <span >{{item.num}}</span>
                        <button class="add" @click="computeNum($event,index)" data-comType='+1'>+</button>
                    </p>
                </div>
            </div>
        </div>
        <!-- <div class="nocart">
            没有商品信息
        </div> -->
        <!-- 底部导航 -->
        <div class="footNav">
            <div class="allcheck">
                <input type="checkbox" v-model="allChecked" @click="changeAll" />全选
            </div>
            <div class="compute">
                合计￥
                <span>{{totalPrice}}</span>
            </div>
            <div class="goPlay">
                支付({{totalNum}})
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'cart',
    data(){
        return {
            cart:[],
            totalPrice:0,
            totalNum:0,
            allChecked:true
        }
    },
    methods:{
        computeNum(e,index){
            // console.log(e)
            let i=index
            // console.log(index)
            let typeC=e.target.dataset.comtype
            let cart =this.cart
            // console.log(typeC)
            if(typeC =='-1'){
                // console.log('-1')
                if(cart[i].num>1){
                    cart[i].num-=1
                }
            }
            if(typeC =='+1'){
                // console.log('+')
                cart[i].num+=1
            }
        },
        // 商品是否选中
        changCheck(e,index){
            // console.log(e.target.checked)
            let checked=e.target.checked//点击后改变的状态
            // console.log(checked,index)
            let cart=this.cart
            cart[index].checked=checked
            // console.log(cart)
            this.allChecked=cart.length?cart.every(v=>v.checked):false
            // console.log(this.allChecked)
        },
        changeAll(){
            // 全选
            this.allChecked=!this.allChecked
            // console.log(this.allChecked)
            let cart=this.cart
            if(cart.length>0){
                cart.forEach((v)=>{
                    if(this.allChecked==true){
                        v.checked=true
                    }else{
                        v.checked=false
                    }
                })
            }else{
                return false
            }    
            // console.log(cart)
        },
        // 计算金额/总数量方法
        computePN(){
            let cart=this.cart
            let totalPrice=0
            let totalNum=0
            if(cart.length>0){
                cart.forEach((v)=>{
                    // console.log(typeof v.goods_price)
                    if(v.checked==true){
                        totalPrice+=v.goods_price*v.num
                        totalNum+=v.num
                    }  
                })
            }else{
                return false
            }
            // console.log(totalPrice,totalNum)
            this.totalPrice=totalPrice
            this.totalNum=totalNum
        }
    },
    mounted(){
        //  获取购物车商品信息，保存到data中
        let cart=JSON.parse(sessionStorage.getItem('cart'))
        // console.log(cart)
        this.cart=cart
        // 
    },
    updated(){
        // console.log('uodate')
        this.computePN()
        // let cart=this.cart
        // let totalPrice=0
        // let totalNum=0
        // cart.forEach((v)=>{
        //     // console.log(typeof v.goods_price)
        //     totalPrice+=v.goods_price*v.num
        //     totalNum+=v.num
        // })
        // // console.log(totalPrice,totalNum)
        // this.totalPrice=totalPrice
        // this.totalNum=totalNum
    }
}
</script>
<style lang="less" scoped>
h3{
    padding: 10px;
    background-color: thistle;
    margin-bottom: 10px;
}
.everyCart{
    width: 100%;
    height: 180px;
    .checkBox{
        float: left;
        width: 15%;
        line-height: 90px;
    }
    .productPic{
        float: left;
        width: 40%;
        img{
            width: 100%;
        }
    }
    .productName{
        float: left;
        width: 45%;
        .nameText{
            font-size: 12px;
        }
        .priceText{
            font-size: 14px;
            color: brown;
            text-align: left;
            padding-left: 10px;
            padding-bottom: 10px;
        }
        .numCompute{
            .dec,.add{
                border: 1px solid black;
                padding: 5px 10px;
                margin-right: 10px;
                margin-left: 10px;
            }

        }
    }
}
.footNav{
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 40px;
    line-height: 50px;
    display: flex;
    justify-content: space-around;
    background-color:whitesmoke;
}
</style>